﻿@using ModeloNegocio;
@model Usuario
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>FormularioNuevoCliente</title>
    <link href="@Url.Content("~/Content/bootstrap/css/bootstrap.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Content/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/bootstrap/js/bootstrap.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/bootstrap/css/bootstrap-responsive.css")" rel="stylesheet" type="text/css" />
   




    <script type="text/javascript">





        function validarExReg(exReg, valorCampo, textoDeAyuda, MensajeDeAyuda) {

            // ver si el valor es valido para la expresion regular dada
            if (!exReg.test(valorCampo)) {
                // si el valor es invalido, desplegar el mensaje indicando que debe corregirlo
                if (textoDeAyuda != null) {
                    textoDeAyuda.innerHTML = MensajeDeAyuda;
                    textoDeAyuda.setAttribute("class", "campoInvalido");
                    return false;
                }
            }
            else {
                // Si el valor es valido, indicarlo

                //alert("campo valido");
                if (textoDeAyuda != null)
                    textoDeAyuda.innerHTML = "valido";
                textoDeAyuda.setAttribute("class", "campoValido");
                return true;
            }
        }






        function tieneEspacios(campo, textoDeAyuda) {
            var exReg = /\s/
            if (exReg.test(campo.value)) {
                if (textoDeAyuda != null) {
                    textoDeAyuda.innerHTML = "No se permiten espacios en el campo.";
                    textoDeAyuda.setAttribute("class", "campoInvalido");
                    return true;
                }
            }
            else {return false;}                
        }




        function validarQueNoEsteVacio(campo, textoDeAyuda) {
            if (tieneEspacios(campo, textoDeAyuda))
                return false;            
            
          return validarExReg(/.+/,
          campo.value, textoDeAyuda,
          "Por favor ingrese un valor.");
        }





        function validarLength(minLength, maxLength, campo, textoDeAyuda) {
            //            alert("estoy en length");
            // Veo si el valor del campo tiene almenos el tamaño minimo y no mas del tamaño maximo
            return validarExReg(new RegExp("^.{" + minLength + "," + maxLength + "}$"),
          campo.value, textoDeAyuda,
          "Por favor entre un valor entre " + minLength + " y " + maxLength +
          " de largo.");
        }






        function validarCodigoPostal(campo, textoDeAyuda) {
            //            alert("estoy en codigo postal");
            // Primero veo si el valor del campo tiene datos
            if (!validarQueNoEsteVacio(campo, textoDeAyuda))
                return false;
            // Veo si el campo tiene cuatro numeros correspondientes al codigo postal
            return validarExReg(/^\d{4}$/,
          campo.value, textoDeAyuda,
          "Por favor ingrese 4 digitos en el codigo postal.");
        }






        function validarFecha(campo, textoDeAyuda) {
            //            alert("estoy en validar fecha");
            // Primero veo si el valor del campo tiene datos
            if (!validarQueNoEsteVacio(campo, textoDeAyuda))
                return false;

            // Veo si ingresa una fecha con el formato valido
            return validarExReg(/^\d{2}\/\d{2}\/(\d{2}|\d{4})$/,
          campo.value, textoDeAyuda,
          "Por favor ingrese una fecha (Por Ejemplo, 15/06/1975).");
        }






        function validarTelefono(campo, textoDeAyuda) {
            // Primero veo si el valor del campo tiene datos
            if (!validarQueNoEsteVacio(campo, textoDeAyuda))
                return false;

            // Veo si el valor del camopo es un numero de telefono
            return validarExReg(/^\(\d{3}\)\d{4}-\d{4}$/,
          campo.value, textoDeAyuda,
          "Por favor ingrese un numero de telefono ( Por Ejemplo, (011)5555-7890  ).");
        }





        function validarEmail(campo, textoDeAyuda) {
            //            alert("estoy en email");
            // Primero veo si el valor del campo tiene datos
            if (!validarQueNoEsteVacio(campo, textoDeAyuda))
                return false;

            // Veo si el valor del campo es una direccion de email
            return validarExReg(/^[\w\.-_\+]+@@[\w-]+(\.\w{2,3})+$/,
          campo.value, textoDeAyuda,
          "Por favor ingrese un email (Por Ejemplo, john@acme.com).");
        }







        function formularioValido() {
            validarQueNoEsteVacio(document.getElementById('userName'), document.getElementById('userName_ayuda'));
            validarQueNoEsteVacio(document.getElementById("nombre"), document.getElementById("nombre_ayuda"));
            validarQueNoEsteVacio(document.getElementById('apellido'), document.getElementById('apellido_ayuda'));
            validarEmail(document.getElementById('mail'), document.getElementById('mail_ayuda'));
            validarCamposRepetidos(document.getElementById('rmail'), document.getElementById('mail'), document.getElementById('rmail_ayuda'), 'Los correos son distintos');
            validarLength(6, 18, document.getElementById('password'), document.getElementById('password_ayuda'));
            validarCamposRepetidos(document.getElementById('rpassword'), document.getElementById('password'), document.getElementById('rpassword_ayuda'), 'Las passwords son distintos');
            validarTelefono(document.getElementById('telefono'), document.getElementById('telefono_ayuda'));



            if (validarQueNoEsteVacio(document.getElementById('userName'), document.getElementById('userName_ayuda')) &&
                validarQueNoEsteVacio(document.getElementById("nombre"), document.getElementById("nombre_ayuda")) &&
                validarQueNoEsteVacio(document.getElementById('apellido'), document.getElementById('apellido_ayuda')) &&
                validarEmail(document.getElementById('mail'), document.getElementById('mail_ayuda')) &&
                validarCamposRepetidos(document.getElementById('rmail'), document.getElementById('mail'), document.getElementById('rmail_ayuda'), 'Los correos son distintos') &&
                validarLength(6, 18, document.getElementById('password'), document.getElementById('password_ayuda')) &&
                validarCamposRepetidos(document.getElementById('rpassword'), document.getElementById('password'), document.getElementById('rpassword_ayuda'), 'Las passwords son distintos') &&
                validarTelefono(document.getElementById('telefono'), document.getElementById('telefono_ayuda')) ) {
                return true;
            }
            else {

                return false;
            }
        }








        function enviarFormulario(form) {

            if (formularioValido()) {
                form.submit();
            }

            //$("#telefono_ayuda").append("<br/><span class='campoInvalido'>Corriga los campos antes de Registrarse</span>")
        }
        







        function validarCamposRepetidos(campo1, campo2, textoDeAyuda, texto) {           

            //alert("Valor de campo1: " + campo1.value + " valor de campo2: " + campo2.value);
            if (!validarQueNoEsteVacio(campo1, textoDeAyuda))
                return false;

            if (campo1.value == campo2.value) {
                //alert("el email es valido"); 
                if (textoDeAyuda != null) {
                    textoDeAyuda.innerHTML = "valido";
                    textoDeAyuda.setAttribute("class", "campoValido");
                    return true;
                }
            }
            else {
                //alert("el email es invalido");
                if (textoDeAyuda != null) {
                    textoDeAyuda.innerHTML = texto;
                    textoDeAyuda.setAttribute("class", "campoInvalido");
                    return false;
                }
            }

        }
       

    </script>


    <style type="text/css">
        span.campoInvalido
        {
            color: Red;
        }
        span.campoValido
        {
            color: Green;
        }
    </style>
</head>
<body>
    <div class="row-fluid">
    </div>
    <div class="row-fluid">
        <div class="span10">
            <form class="form-actions" id="formularioRegistro" action="@Url.Action("FormularioNuevoCliente", "Registro")" method="post">
            <table>
             <tr>
                    <td>
                        <label for="userName">
                            Nombre de Usuario</label>
                    </td>
                    <td>
                        <input id="userName" type="text" name="userName" value=""  onblur="validarQueNoEsteVacio(this, document.getElementById('userName_ayuda'))" />
                        <span id="userName_ayuda"></span>
                    </td>
                </tr>               
                <tr>
                    <td>
                        <label for="nombre">
                            Nombre</label>
                    </td>
                    <td>
                        <input id="nombre" type="text" name="nombre" value="" onblur="validarQueNoEsteVacio(this, document.getElementById('nombre_ayuda'))" />
                        <span id="nombre_ayuda"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="apellido">
                            Apellido</label>
                    </td>
                    <td>
                        <input id="apellido" type="text" name="apellido" value="" onblur="validarQueNoEsteVacio(this, document.getElementById('apellido_ayuda'))" />
                        <span id="apellido_ayuda"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="mail">
                            Email</label>
                    </td>
                    <td>
                        <input id="mail" type="text" name="mail" value="" onblur="validarEmail(this, document.getElementById('mail_ayuda'))" />
                        <span id="mail_ayuda"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="rmail">
                            Repetir Email</label>
                    </td>
                    <td>
                        <input id="rmail" type="text" name="rmail" value="" onblur="validarCamposRepetidos(this, document.getElementById('mail'), document.getElementById('rmail_ayuda'),'Los correos son distintos')" />
                        <span id="rmail_ayuda"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="password">
                            Clave</label>
                    </td>
                    <td>
                        <input id="password" type="text" name="password" value="" onblur="validarLength(6,18,this, document.getElementById('password_ayuda'))" />
                        <span id="password_ayuda"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="rpassword">
                            Repetir Clave</label>
                    </td>
                    <td>
                        <input id="rpassword" type="text" name="rpassword" value="" onblur="validarCamposRepetidos(this, document.getElementById('password'), document.getElementById('rpassword_ayuda'),'Las passwords son distintos')" />
                        <span id="rpassword_ayuda"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="telefono">
                            Telefono</label>
                    </td>
                    <td>
                        <input id="telefono" type="text" name="telefono" value="" onblur="validarTelefono(this, document.getElementById('telefono_ayuda'))" />
                        <span id="telefono_ayuda"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <input type="button" class="btn btn-primary btn-small" name="botonRegistro" value="Registrarme"
                            onclick="enviarFormulario(this.form)" />
                    </td>
                </tr>
            </table>
            </form>
        </div>
        <div class="span2">
        </div>
    </div>
</body>
</html>
